<template>
  <div class="main-content">

    <div style="font-size: 20px; margin-bottom: 20px">我报名的活动
      <el-radio-group v-model="flagNum">
        <el-radio-button label="1" border>用户报名</el-radio-button>
        <el-radio-button label="2" border>志愿者报名</el-radio-button>
      </el-radio-group>
    </div>

    <div>

      <div v-if="flagNum === '1'">
        <el-table :show-overflow-tooltip="true" max-height="480px" :data="activityRegList" style="width: 100%">
          <el-table-column label="活动名称">
            <template v-slot="scope">
              <a :href="'/front/activityDetail?id=' + scope.row.id" target="_blank">{{ scope.row.activityName
                }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系方式">
          </el-table-column>
          <el-table-column label="报名日期">
            <template v-slot="scope">
              {{ customFormatterDataTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="opinion" label="审核意见">
          </el-table-column>
          <el-table-column prop="status" label="审核状态">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.status === ''">待审核</el-tag>
              <el-tag type="success" v-if="scope.row.status === 1">审核通过</el-tag>
              <el-tag type="danger" v-if="scope.row.status === 0">审核未通过</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next" :total="totalReg">
          </el-pagination>
        </div>
      </div>


      <div v-if="flagNum === '2'">
        <el-table max-height="480px" :data="volunteerActivityList" :show-overflow-tooltip="true" style="width: 100%">
          <el-table-column label="活动名称">
            <template v-slot="scope">
              <a :href="'/front/activityDetail?id=' + scope.row.id" target="_blank">{{
                scope.row.activityName
                }}</a>
            </template>
          </el-table-column>
          <el-table-column prop="phone" label="联系方式">
          </el-table-column>
          <el-table-column label="报名日期">
            <template v-slot="scope">
              {{ customFormatterDataTime(scope.row.createTime) }}
            </template>
          </el-table-column>
          <el-table-column prop="opinion" label="审核意见">
          </el-table-column>
          <el-table-column prop="status" label="审核状态">
            <template v-slot="scope">
              <el-tag type="primary" v-if="scope.row.status === ''">待审核</el-tag>
              <el-tag type="success" v-if="scope.row.status === 1">审核通过</el-tag>
              <el-tag type="danger" v-if="scope.row.status === 0">审核未通过</el-tag>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <el-pagination background @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[5, 10, 20]" :page-size="pageSize" layout="total, prev, pager, next"
            :total="volunteerActivityTotal">
          </el-pagination>
        </div>
      </div>


    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { customFormatterDataTime } from "@/utils/dateTimeFormatter"
export default {
  name: "FrontActivitySign",
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,
      userName: null,
      fromVisible: false,
      flagNum:'1',
      form: {},
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
      ids: []
    }
  },
  created() {
    // this.load(1)
    this.pageQueryactivityRegListActions({ page: this.pageNum, pageSize: this.pageSize });
    this.queryPageVolunteerActivityActions({ page: this.pageNum, pageSize: this.pageSize });
  },
  computed: {
    ...mapState('userActivity', ['activityRegList', 'totalReg', 'volunteerActivityList','volunteerActivityTotal']),
  },
  methods: {
    customFormatterDataTime,
    ...mapActions('userActivity', ['pageQueryactivityRegListActions','queryPageVolunteerActivityActions']),
    handleSelectionChange(rows) {   // 当前选中的所有的行数据
      this.ids = rows.map(v => v.id)   //  [1,2]
    },
    handleCurrentChange(pageNum) {
      this.load(pageNum)
    },
  }
}
</script>

<style scoped>
a{
  text-decoration : blink ;
}
</style>
